<template>
  <div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row><el-col><el-button type="primary" @click="showAddCateDialog">添加分类</el-button></el-col></el-row>

			<!-- 表格区域 -->
			<tree-table :data="cateList" :columns="columns" 
				:selection-type="false" :expand-type="false" :show-index="true" 
				border index-text="#" :show-row-hover="false" class="tree-table">
				<!-- //是否有效 -->
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
					<i class="el-icon-error" v-else style="color:red"></i>
				</template>
				<!-- //排序 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
					<el-tag size="mini" type="success"  v-else-if="scope.row.cat_level === 1">二级</el-tag>
					<el-tag size="mini" type="warning" v-else>三级</el-tag>
				</template>
				<!-- 操作 -->
				<template slot="opt">
					<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
				</template>
			</tree-table>

			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="querInfo.pagenum"
				:page-sizes="[3, 5, 10, 15]"
				:page-size="querInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
    </el-pagination>
		</el-card>

		<!-- 添加分类对话框 -->
		<el-dialog
			title="提示"
			:visible.sync="addCateDialogVisible"
			width="50%">
			<!-- 添加分类的表单 -->
			<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
				<el-form-item label="分类名称：" prop="cat_name">
					<el-input v-model="addCateForm.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="父级分类：" >
          <!-- options用来指定数据源-->
          <!-- props用来指定配置对象-->
					<el-cascader
							v-model="selectedKeys"
							:options="parentCateList"
							:props="{ expandTrigger: 'hover' }"
							@change="parentCateChanged">
					</el-cascader>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCateDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
  export default {
		name:'Cate',
		data(){
			return {
				//商品分类的数据列表
				cateList:[],
				//查询条件
				querInfo:{
					type:3,
					pagenum:1,
					pagesize:5
				},
				//总数据条数
				total:0,
				//为table指定列的定义
				columns:[
					{label:'分类名称',prop:'cat_name'},
					{label:'是否有效',type:'template',template:'isok'},	//当前列作为模板列，isok是当前列的模板名称
					{label:'排序',type:'template',template:'order'},
					{label:'操作',type:'template',template:'opt'}
				],
				//控制添加分类对话框的显示与隐藏
				addCateDialogVisible:false,
				//添加分类的表单数据
				addCateForm:{
					cat_name:'',//将要添加分类的名称
					cat_pid:0,//父级id
					cat_level:0,//分类的等级，默认要添加的是一级分类
				},
				//分类表单验证规则
				addCateFormRules:{
					cat_name:[ { required: true, message: '请输入分类名称', trigger: 'blur' }]
				},
				//父级分类的列表
				parentCateList:[],
        //指定几联选择器的配置对象
        cascaderProps: {
          value:'cat_id',
          label:'cat_name',
          children:'children'
        },
        //选中的父级分类的id数组
        selectedKeys:[],
			}
		},
		created(){
			this.getCateList()
		},
		methods:{
			async getCateList(){
				const {data:res} = await this.$http.get('categories',{params:this.querInfo})
				if(res.meta.status !== 200){
					return this.$message.error("查询商品分类 失败")
				}
				console.log(res);
				//把数据列表赋值给cateList
				this.cateList = res.data.result
				//为总数据条数赋值
				this.total = res.data.total
			},
			//监听pagesize改变
			handleSizeChange(newSize){
				this.querInfo.pagesize = newSize
				this.getCateList()
			},
			//监听pagenum的改变
			handleCurrentChange(newNum){
				this.querInfo.pagenum = newNum
				this.getCateList()
			},
			//显示添加分类对话框
			showAddCateDialog(){
				//先获取父级分类数据的列表
				this.getParentCateList()
				//再弹出对话框
				this.addCateDialogVisible = true
			},
			//获取父级分类的数据列表
			async getParentCateList(){
				const {data:res} = await this.$http.get('categories',{params:{type:2}})
				if(res.meta.status !== 200) {
					return this.$message.error("获取父级分类数据失败")
				}
				this.parentCateList = res.data
			},
      //选择项发生变化时触发这个函数
      parentCateChanged(){
        console.log(this.selectedKeys)
      }
		}
  }
</script>

<style>
	.tree-table{
		margin-top: 15px;
	}
</style>